<template>
  <div class="calendar">
    <div class="top">
      <!-- <span>2020-04-14</span>
      <span>今天</span>-->
      <van-calendar
        color="#2a579a"
        :show-title="false"
        :poppable="false"
        :show-confirm="false"
        :style="{ height: '300px' }"
      />
      <span class="reset">今天</span>
    </div>
    <div class="center">
      <div class="center-left" :class="{ activePath: isleft }" @click="jump('left')">已设置提醒</div>
      <div class="center-center" :class="{ activePath: iscenter }" @click="jump('center')">创建时间</div>
      <div class="center-right" :class="{ activePath: isright }" @click="jump('right')">最后发言时间</div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: "",
      show: false,
      isleft: true,
      iscenter: false,
      isright: false
    }
  },
  computed: {},
  methods: {
    jump(path) {
      if (this.$route.path.indexOf(path) !== -1) return
      this.$router.push(`/calendar/${path}`)
      switch (path) {
        case "left":
          this.isleft = true
          this.iscenter = false
          this.isright = false
          break
        case "center":
          this.isleft = false
          this.iscenter = true
          this.isright = false
          break
        case "right":
          this.isleft = false
          this.iscenter = false
          this.isright = true
          break
      }
    }
  }
}
</script>

<style>
.reset {
  position: absolute;
  right: 10px;
  top: 10px;
}
.center {
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #bcbcbc;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  margin-top: 20px;
  margin-bottom: 30px;
}
.center div {
  padding: 0 20px;
  padding-bottom: 30px;
  cursor: pointer;
}
.activePath {
  color: #2a579a;
}
</style>
